<template>
  <div>
    <TopBar></TopBar>
    <div class="home" id="home" name="home">
      <!-- 轮播图 -->
      <div class="block">
        <el-carousel height="460px" :data="tableData">
          <el-carousel-item v-for="(item, index) in tableData" :key="index">
            <el-image
                :src="'http://localhost:8081/api/files/' + item.img" >
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图END -->
      <div class="main-box">
        <div class="main">
          <!-- 家电商品展示区域 -->
          <div class="appliance" id="promo-menu">
            <div class="box-hd">
              <div class="title">书籍类</div>
              <div class="more" id="more">
                <MyMenu :val="2" @fromChild="getChildMsg">
                </MyMenu>
              </div>
            </div>
            <div class="box-bd">
              <div class="promo-list">
                <ul>
                  <li>
                    <img :src="'http://localhost:8081/api/files/bookindex'" />
                  </li>
                  <li>
                    <img :src="'http://localhost:8081/api/files/bookindex2'" />
                  </li>
                </ul>
              </div>
              <div class="list">
                <MyList :list="bookList" :isMore="true"></MyList>
              </div>
            </div>
          </div>
          <!-- 家电商品展示区域END -->


          <!-- 手机商品展示区域 -->
          <div class="life">
            <div class="box-hd">
              <div class="title">生活类1</div>
            </div>
            <div class="box-bd">
              <div class="promo-list">
                <router-link class="promolist1" to >
                  <img :src="'http://localhost:8081/api/files/lifeindex1'" />
                </router-link>
              </div>
              <div class="list">
                <MyList :list="lifeList" :isMore="true"></MyList>
              </div>
            </div>
          </div>
          <!-- 手机商品展示区域END -->

          <!-- 配件商品展示区域 -->
          <div class="accessory" id="promo-menu">
            <div class="box-hd">
              <div class="title">学习类</div>
              <div class="more" id="more">
                <MyMenu :val="3" @fromChild="getChildMsg2">
                </MyMenu>
              </div>
            </div>
            <div class="box-bd">
              <div class="promo-list">
                <ul>
                  <li>
                    <img :src="'http://localhost:8081/api/files/bookindex'" />
                  </li>
                  <li>
                    <img :src="'http://localhost:8081/api/files/1700917417793'" />
                  </li>
                </ul>
              </div>
              <div class="list">
                <MyList :list="studyList" :isMore="true"></MyList>
              </div>
            </div>

          </div>
          <!-- 配件商品展示区域END -->
        </div>
      </div>
    </div>
    <BottomBar></BottomBar>
  </div>
</template>
<script>
import MyList from "@/components/MyList";
import MyMenu from "@/components/MyMenu";
import request from "@/utils/request";
import TopBar from "@/views/TopBar"; // Import TopBar component
import BottomBar from "@/views/BottomBar"; // Import BottomBar component
export default {
  components: {
    MyList,
    MyMenu,
    TopBar, // Register TopBar component
    BottomBar // Register BottomBar component
  },
  data() {
    return {
      params: {
        name: '',
        seller: '',
        typeId: '',
        pageNum: 1,
        pageSize: 5,
      },
      carousel: "",
      lifeList: "",
      bookList: "",
      studyList: "",
      tableData:[],
      lifeData:[],
      bookData:[],
      studyData:[],
    };
  },
  created() {
    this.findBySearchcarousel();
    this.findBySearchlife();
    this.findBySearchbook();
    this.findBySearchstudy();
    this.findBySearchother();
  },
  methods: {
    findBySearchlife() {
      this.params.typeId=52;
      request.get("/commodity/search", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.lifeList = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      })
      this.params.typeId='';
    },
    findBySearchbook() {
      this.params.typeId=53;
      request.get("/commodity/search", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.bookList = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      })
      this.params.typeId='';
    },
    findBySearchstudy() {
      this.params.typeId=55;
      request.get("/commodity/search", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.studyList = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      })
      this.params.typeId='';
    },
    findBySearchother() {
      this.params.typeId=54;
      request.get("/commodity/search", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.otherList = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      })
      this.params.typeId='';
    },
    findBySearchcarousel() {
      request.get("/carousel/search", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>